<template>
  <div class="account-settings">
    <!-- 基础信息设置 -->
    <el-card class="settings-card">
      <div slot="header">
        <span>基础信息</span>
      </div>
      <el-form label-width="120px" label-position="left">
        <el-form-item label="头像">
          <el-upload
              class="avatar-uploader"
              action="https://your-upload-api.com"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
            <img v-if="form.avatar" :src="form.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="昵称">
          <el-input v-model="form.nickname" style="width: 300px"></el-input>
        </el-form-item>

        <el-form-item label="个人简介">
          <el-input
              type="textarea"
              :rows="4"
              v-model="form.bio"
              placeholder="介绍一下你自己"
              style="width: 400px"
              maxlength="200"
              show-word-limit>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="updateProfile">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 安全设置 -->
    <el-card class="settings-card mt-20">
      <div slot="header">
        <span>安全设置</span>
      </div>
      <el-form label-width="120px" label-position="left">
        <!-- 手机绑定 -->
        <el-form-item label="绑定手机">
          <el-input
              v-model="form.phone"
              style="width: 300px"
              placeholder="未绑定手机号">
            <template slot="append">
              <el-button
                  v-if="!form.phone"
                  type="text"
                  @click="showPhoneDialog">
                立即绑定
              </el-button>
              <el-button
                  v-else
                  type="text"
                  @click="unbind('phone')">
                解绑
              </el-button>
            </template>
          </el-input>
        </el-form-item>

        <!-- 邮箱绑定 -->
        <el-form-item label="绑定邮箱">
          <el-input
              v-model="form.email"
              style="width: 300px"
              placeholder="未绑定邮箱">
            <template slot="append">
              <el-button
                  v-if="!form.email"
                  type="text"
                  @click="showEmailDialog">
                立即绑定
              </el-button>
              <el-button
                  v-else
                  type="text"
                  @click="unbind('email')">
                解绑
              </el-button>
            </template>
          </el-input>
        </el-form-item>

        <!-- 密码修改 -->
        <el-form-item label="登录密码">
          <el-input
              type="password"
              style="width: 300px"
              value="********"
              disabled>
            <template slot="append">
              <el-button type="text" @click="showPwdDialog">修改密码</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 高级设置 -->
    <el-card class="settings-card mt-20">
      <div slot="header">
        <span>高级设置</span>
      </div>
      <div class="danger-zone">
        <h4>危险操作区</h4>
        <div class="danger-item">
          <span>注销账号</span>
          <el-button
              type="danger"
              plain
              @click="showDeleteConfirm">
            永久注销账号
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 修改密码对话框 -->
    <el-dialog title="修改密码" :visible.sync="pwdDialogVisible" width="500px">
      <el-form :model="pwdForm" :rules="pwdRules" ref="pwdForm">
        <el-form-item label="当前密码" prop="oldPassword">
          <el-input
              type="password"
              v-model="pwdForm.oldPassword"
              autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
              type="password"
              v-model="pwdForm.newPassword"
              autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
              type="password"
              v-model="pwdForm.confirmPassword"
              autocomplete="off">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="pwdDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPwdForm">确认修改</el-button>
      </span>
    </el-dialog>

    <!-- 手机绑定对话框 -->
    <el-dialog title="绑定手机" :visible.sync="phoneDialogVisible" width="400px">
      <el-form :model="phoneForm" :rules="phoneRules" ref="phoneForm">
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="phoneForm.phone">
            <template slot="append">
              <el-button
                  :disabled="codeCountdown > 0"
                  @click="sendSMSCode">
                {{ codeCountdown ? `${codeCountdown}秒后重发` : '获取验证码' }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="phoneForm.code"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="phoneDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="bindPhone">确认绑定</el-button>
      </span>
    </el-dialog>

    <!-- 邮箱绑定对话框（类似手机绑定，此处省略） -->
  </div>
</template>

<script>
export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 8) {
        callback(new Error('密码长度不能小于8位'))
      } else if (!/[A-Za-z]/.test(value) || !/[0-9]/.test(value)) {
        callback(new Error('密码必须包含字母和数字'))
      } else {
        callback()
      }
    }

    return {
      form: {
        avatar: 'https://example.com/avatar.jpg',
        nickname: '宠物达人',
        bio: '资深宠物爱好者，家有两只布偶猫',
        phone: '138****1234',
        email: 'user@example.com'
      },
      pwdDialogVisible: false,
      phoneDialogVisible: false,
      codeCountdown: 0,
      pwdForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      phoneForm: {
        phone: '',
        code: ''
      },
      pwdRules: {
        oldPassword: [
          {required: true, message: '请输入当前密码', trigger: 'blur'}
        ],
        newPassword: [
          {required: true, validator: validatePassword, trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请确认新密码', trigger: 'blur'},
          {validator: this.validateConfirmPwd, trigger: 'blur'}
        ]
      },
      phoneRules: {
        phone: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确'}
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {pattern: /^\d{6}$/, message: '验证码为6位数字'}
        ]
      }
    }
  },
  methods: {
    // 头像上传成功处理
    handleAvatarSuccess(res, file) {
      this.form.avatar = URL.createObjectURL(file.raw)
    },

    // 更新个人资料
    updateProfile() {
      this.$message.success('资料更新成功')
    },

    // 显示密码修改对话框
    showPwdDialog() {
      this.pwdDialogVisible = true
      this.$nextTick(() => {
        this.$refs.pwdForm.resetFields()
      })
    },

    // 显示手机绑定对话框
    showPhoneDialog() {
      this.phoneDialogVisible = true
      this.$nextTick(() => {
        this.$refs.phoneForm.resetFields()
      })
    },

    // 发送短信验证码
    sendSMSCode() {
      this.codeCountdown = 60
      const timer = setInterval(() => {
        if (this.codeCountdown > 0) {
          this.codeCountdown--
        } else {
          clearInterval(timer)
        }
      }, 1000)
      this.$message.success('验证码已发送')
    },

    // 确认密码验证
    validateConfirmPwd(rule, value, callback) {
      if (value !== this.pwdForm.newPassword) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    },

    // 提交密码修改
    submitPwdForm() {
      this.$refs.pwdForm.validate(valid => {
        if (valid) {
          // 提交修改逻辑
          this.pwdDialogVisible = false
          this.$message.success('密码修改成功')
        }
      })
    },

    // 绑定手机
    bindPhone() {
      this.$refs.phoneForm.validate(valid => {
        if (valid) {
          this.form.phone = this.phoneForm.phone
          this.phoneDialogVisible = false
          this.$message.success('手机绑定成功')
        }
      })
    },

    // 解绑操作
    unbind(type) {
      this.$confirm(`确定要解绑${type === 'phone' ? '手机' : '邮箱'}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form[type] = ''
        this.$message.success('解绑成功')
      })
    },

    // 显示注销确认
    showDeleteConfirm() {
      this.$confirm('此操作将永久删除账号且不可恢复，确认继续吗？', '警告', {
        confirmButtonText: '确认注销',
        cancelButtonText: '取消',
        type: 'error',
        confirmButtonClass: 'el-button--danger'
      }).then(() => {
        // 执行注销逻辑
        this.$message.success('账号已注销')
      })
    }
  }
}
</script>

<style scoped>
.settings-card {
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader >>> .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.danger-zone {
  padding: 20px;
  border-radius: 4px;
  background-color: #fff5f5;
}

.danger-zone h4 {
  color: #f56c6c;
  margin: 0 0 15px 0;
}

.danger-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
</style>